<template>
  <Card title="权限" :head-style="{ textAlign: 'center', fontWeight: 'bold' }">
    <div class="w-full flex justify-center">
      <div v-for="(item, index) in list" :key="index" class="ml-4">
        <Checkbox v-model:checked="dataRef[item.field]" @change="handleChange" /> {{ item.label }}
      </div>
    </div>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, unref, watch } from 'vue';
  import { Checkbox, Card } from 'ant-design-vue';

  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    modelValue: {
      type: Object as PropType<object>,
      default: () => {
        return {};
      },
    },
  });
  const list = ref([
    {
      label: '增加',
      value: false,
      field: 'canAdd',
    },
    {
      label: '修改',
      value: false,
      field: 'canEdit',
    },
    {
      label: '导入',
      value: false,
      field: 'canImport',
    },
    {
      label: '导出',
      value: false,
      field: 'canExport',
    },
    {
      label: '删除',
      value: false,
      field: 'canDel',
    },
    {
      label: '选择',
      value: false,
      field: 'canSel',
    },
  ]);

  const dataRef = ref<Recordable>({});

  watch(
    () => props.modelValue,
    (newVal) => {
      dataRef.value = newVal;
    },
    {
      immediate: true,
    },
  );

  const handleChange = () => {
    console.log('uui', dataRef.value);
    emit('update:modelValue', unref(dataRef));
  };
</script>
